<template>
    <div class="login">
        <el-form ref="ruleFormRef" :model="loginForm" :rules="rules" class="login-form">
            <div class="content">
                <h3 class="title">Linux选型系统</h3>
                <div class="form">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" size="large" placeholder="账号">
                            <template #prefix>
                                <svg-icon icon-class="user"></svg-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="text" show-password size="large"
                                  placeholder="密码"
                                  @keyup.enter="handleLogin(ruleFormRef)">
                            <template #prefix>
                                <svg-icon icon-class="password"></svg-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click.prevent="handleLogin(ruleFormRef)"
                                   class="submit">
                            <span v-if="!loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <span>Copyright © 2023 - {{ new Date().getFullYear() }} By Vhans</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from "@/router";
import useStore from '@/store';
import {FormInstance, FormRules} from 'element-plus';
import {reactive, ref} from 'vue';

const {user} = useStore();
const ruleFormRef = ref<FormInstance>();
const loading = ref(false);
const loginForm = reactive({
    username: "vhans",
    password: "123456",
    code: undefined,
});
const rules = reactive<FormRules>({
    username: [{required: true, message: "请输入账号", trigger: "blur"}],
    password: [{required: true, message: "请输入密码", trigger: "blur"}, {
        min: 6,
        message: "密码不能少于6位",
        trigger: "blur"
    }],
});
const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
        if (valid) {
            loading.value = true;
            user.LogIn(loginForm).then(() => {
                router.push({path: "/"});
                loading.value = false;
            }).catch(() => {
                loading.value = false;
            });
        } else {
            return false;
        }
    })
}

</script>
<style lang="scss" scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("@/assets/login-bg.jpg");
    background-size: cover;
}

.title {
    position: relative;
    top: 20px;
    text-align: center;
    color: rgba(197, 204, 193, 0.8);
    width: 100%;
    height: 1.8em;
    font-size: 1em;
    font-weight: 800;
}

.login-form {
    position: relative;
    width: 440px;
    height: 400px;
    padding-top: 50px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, .05),
    25px 35px 20px rgba(0, 0, 0, .05),
    25px 30px 30px rgba(0, 0, 0, .05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
    animation: animate 6s linear infinite;

    @keyframes animate {
        0% {
            border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
        }
        40% {
            border-radius: 41% 59% 53% 47% / 57% 37% 63% 43%
        }
        80% {
            border-radius: 44% 56% 53% 47% / 46% 59% 41% 54%;
        }

        100% {
            border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
        }
    }

    &::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 85px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        opacity: 0.9;
    }

    &::after {
        content: '';
        position: absolute;
        top: 80px;
        left: 120px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        opacity: 0.9;
    }
}

.content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    gap: 15px;

    .form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;

        .el-input {
            width: 200px;
        }

        .submit {
            position: relative;
            border-radius: 25px;
            border: none;
            outline: none;
            background-color: transparent;
            width: 80px;
            height: 80px;
            font-size: 1em;
            padding: 10px 15px;
            cursor: pointer;
            letter-spacing: 0.1em;
            font-weight: 800;
            box-shadow: inset 10px 10px 10px rgba(190, 1, 254, .05),
            15px 25px 10px rgba(190, 1, 254, .1),
            15px 20px 20px rgba(190, 1, 254, .1),
            inset -2px -5px 10px rgba(255, 255, 255, 1);
            border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
            transition: 0.5s ease-in-out;

            &::before {
                content: '';
                position: absolute;
                top: 10px;
                left: 15px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #fff;
                opacity: 0.45;
            }

            &:hover {
                border-radius: 50%;
            }
        }
    }
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial, system-ui;
    font-size: 12px;
    letter-spacing: 1px;
}
</style>